import './index.scss'
import { Link } from 'react-router-dom'
// import { Image } from 'antd-mobile'
import home from '@/assets/images/home.svg'

// 使用类型别名
type Item  = 
{
    id?: number;
    title?: string;
    link:string;
    classname?: string
}


type ItemProps = {
    items: Item[]; // 使用上面定义的类型或接口
}

const BreadNav = ({ items }: ItemProps) => { 
    // const [{ title, link, classname }] = props
    return (
        <div className='bread-box'>
            <div className="bread-item">
                <Link to='/' >
                    {/* <span className='iconfont icon-zhuye'></span> */}
                    <span ><img src={home} alt="home" style={{ width: '18px',  }} /></span>
                </Link>
            </div>
            {items.map((item) => (
                <div className="bread-item" key={item.id}>
                    <span className="iconfont-lt"> &gt; </span>
                    {item.classname === "active" ? <span className="active">{item.title}</span> : 
                    <Link to={item.link}><span>{ item.title }</span></Link>
                    }
                </div>
            ))}
        </div>
    )
}

export default BreadNav